import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtMultimedia

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 600
    visible: true
    title: "Qt6 视频播放器"

    // states: [
    //     State {
    //         name: "FULLSCREEN"
    //         PropertyChanges {
    //             target: playlist
    //             Layout.preferredWidth: 0
    //             visible: false
    //         }
    //         PropertyChanges {
    //             target: controlBar
    //             visible: false
    //         }
    //         PropertyChanges {
    //             target: mainWindow
    //             visibility: Window.FullScreen
    //         }
    //     }
    // ]

    MediaPlayer {
        id: mediaPlayer
        audioOutput: AudioOutput {}
        videoOutput: videoOutput
        onPositionChanged: progressSlider.value = position
        onDurationChanged: progressSlider.to = duration
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        RowLayout {
            id: mainContent
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 0

            VideoOutput {
                id: videoOutput
                Layout.fillWidth: true
                Layout.fillHeight: true

                MouseArea {
                    anchors.fill: parent
                    // doubleClickEnabled: true
                    onDoubleClicked: toggleFullscreen()
                }
            }

            Rectangle {
                id: playlist
                Layout.preferredWidth: 200
                Layout.fillHeight: true
                color: "#f0f0f0"
                border.color: "#cccccc"

                ListView {
                    id: playlistView
                    anchors.fill: parent
                    clip: true
                    model: ListModel {
                        id: playlistModel
                        ListElement { title: "示例视频1"; path: "file:///path/to/video1.mp4" }
                        ListElement { title: "示例视频2"; path: "file:///path/to/video2.mp4" }
                    }

                    delegate: Button {
                        width: parent.width
                        text: title
                        flat: true
                        onClicked: {
                            mediaPlayer.source = path
                            mediaPlayer.play()
                        }
                    }

                    ScrollBar.vertical: ScrollBar {}
                }
            }
        }

        Rectangle {
            id: controlBar
            Layout.fillWidth: true
            height: 60
            color: "#e0e0e0"

            RowLayout {
                anchors.fill: parent
                anchors.margins: 10
                spacing: 15

                // 播放/暂停按钮
                Button {
                    id: playButton
                    text: mediaPlayer.playbackState === MediaPlayer.PlayingState ? "⏸" : "▶"
                    font.pixelSize: 24
                    Layout.preferredWidth: 60
                    Layout.preferredHeight: 40
                    onClicked: togglePlayback()

                    background: Rectangle {
                        radius: 5
                        color: parent.down ? "#d0d0d0" : "#f0f0f0"
                    }
                }

                Slider {
                    id: progressSlider
                    Layout.fillWidth: true
                    from: 0
                    to: mediaPlayer.duration
                    onMoved: mediaPlayer.position = value
                }

                Label {
                    text: `${formatTime(progressSlider.value)} / ${formatTime(progressSlider.to)}`
                    font.family: "Consolas"
                    function formatTime(ms) {
                        const totalSeconds = Math.floor(ms / 1000)
                        const minutes = Math.floor(totalSeconds / 60)
                        const seconds = totalSeconds % 60
                        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
                    }
                }
            }
        }
    }

    function togglePlayback() {
        if (mediaPlayer.playbackState === MediaPlayer.PlayingState) {
            mediaPlayer.pause()
        } else {
            mediaPlayer.play()
        }
    }

    function toggleFullscreen() {
        if (mainWindow.state === "FULLSCREEN") {
            mainWindow.state = ""
            mainWindow.showNormal()
        } else {
            mainWindow.state = "FULLSCREEN"
            mainWindow.showFullScreen()
        }
    }

    Shortcut {
        sequence: "Space"
        onActivated: togglePlayback()
    }

    Shortcut {
        sequence: "Esc"
        onActivated: {
            if (mainWindow.state === "FULLSCREEN") {
                toggleFullscreen()
            }
        }
    }

    // 平滑过渡动画
    Behavior on Layout.preferredWidth {
        NumberAnimation { duration: 200 }
    }
}